import React from 'react';
import { connect } from 'dva';
import styles from './mine_evaluation.less';
import styles1 from './mine_evaluation.css';
import { NavBar, Icon,TextareaItem,Button} from 'antd-mobile';
import { getData } from '../../../utils/localData'
import { Rate} from 'antd';
import 'antd/dist/antd.css';
@connect(({global,orders}) => ({
  global,orders
}))
export default class Mine_evaluation extends React.Component {
  constructor() {
    super()
    this.state = {
      overallStar:0,
      distributionStar:0,
      serviceStar:0,
      comment:'',
    }
  }


  render() {
    document.title = '评价'
    console.log(this.props)
    let {evaluation} = this.props.orders
    if(evaluation.orderEvaluationId){
        this.state.overallStar = evaluation.overallStar
        this.state.distributionStar = evaluation.distributionStar
        this.state.serviceStar = evaluation.serviceStar
        this.state.comment = evaluation.comment
    }
    console.log(evaluation.orderEvaluationId)
    return (
      <div className={styles.star_all}>

      {/*<div className={styles1.leve_alltop}>
         <NavBar
            mode="light"
            icon={<Icon type="left" onClick={() => { this.props.history.goBack() }} />}
            onLeftClick={() => console.log('onLeftClick')}>评价
         </NavBar>
      </div>*/}

        <div className={styles1.staralcen}>
              <div className={styles.star}>
                 <div className={styles.star_eve}>
                   <span>总体评分</span>
                   <Rate disabled={evaluation.orderEvaluationId?true:false} value={this.state.overallStar} onChange={(e)=>{
                      this.setState({overallStar:e})
                    }} />
                 </div>
                 <div className={styles.star_eve}>
                   <span>配送评分</span>
                   <Rate disabled={evaluation.orderEvaluationId?true:false} value={this.state.distributionStar} onChange={(e)=>{
                      this.setState({distributionStar:e})
                    }}/>
                 </div>
                 <div className={styles.star_eve}>
                   <span>服务评分</span>
                   <Rate disabled={evaluation.orderEvaluationId?true:false} value={this.state.serviceStar} onChange={(e)=>{
                      this.setState({serviceStar:e})
                    }}/>
                 </div>
             </div>


           <div className={styles.title}>详细评价</div>



           <div className={styles.eva_b}>

           <TextareaItem
            editable={evaluation.orderEvaluationId?false:true}
            value={this.state.comment}
            onChange={(e)=>{
              this.setState({comment:e})
            }}
            rows={5}
            count={800} className={styles.texta} placeholder='欢迎您对我们做出评价' />
            </div>
</div>



            <div className={styles.mine_but}>
                {evaluation.orderEvaluationId?null:
                <Button className={styles.mine_butin} onClick={()=>{
                  if(this.state.overallStar===0){
                    alert("请设置总体评分")
                    return
                  }
                  if(this.state.distributionStar===0){
                    alert("请设置配送评分")
                    return
                  }
                  if(this.state.serviceStar===0){
                    alert("请设置服务评分")
                    return
                  }
                  let isT = this.checkStr(this.state.comment)
                  if(!isT){
                    return
                  }
                  let isT2 = this.checkStrs(this.state.comment)
                  if(!isT2){
                    return
                  }


                  const { dispatch } = this.props
                  let user = JSON.parse(getData("userInfo"));
                  dispatch({
                      type: 'orders/saveEvaluation',
                      payload: {
                        orderId:this.props.location.orderId,
                        commentatorId:user.userId,
                        overallStar:this.state.overallStar,
                        distributionStar:this.state.distributionStar,
                        serviceStar:this.state.serviceStar,
                        comment:this.state.comment
                      },
                  })
                  this.props.history.goBack()
                  }}>发表评价</Button>
                }
            </div>
     </div>
    )
  }

  componentDidMount(){
    const { dispatch } = this.props
    dispatch({
        type: 'orders/selEvaluation',
        payload: {
          orderId:this.props.location.orderId
        },
    })
  }

  checkStr(val){ 
    var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
    regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
    if(regEn.test(val) || regCn.test(val)) {
        alert("详细评价中不能包含特殊字符.");
        return false;
    }else{
      return true;
    }
  }

  checkStrs(val){ 
    var regEn = /[\ud800-\udbff][\udc00-\udfff]/g;
    if(regEn.test(val)) {
        alert("详细评价中不能包含表情.");
        return false;
    }else{
      return true;
    }
  }
  
}
